<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css" />
    <link rel="stylesheet" href="../css/base.css" />
    <link rel="stylesheet" href="../css/cart.css" />
    <script src="../js/jquery-1.11.3.js"></script>
  </head>
  <body>
    <!-- 头部 -->
    <div class="header">
      <!-- 顶部导航栏 -->
      <div class="nav">
        <div class="nav_container">
          <ul class="nav_left">
            <li>
              <a href="index.html">
                <s class="home"></s>
                <span>网站首页</span>
              </a>
            </li>
            <li>
              <a href="javascript:;" id="wechat">
                <s class="weixin"></s>
                <span>微信</span>
                <img src="../imgs/index/header/icon_down.png" alt="" />
              </a>
              <div class="erweima" style="display: none">
                <img src="../imgs/index/header/erweima.png" alt="" />
              </div>
            </li>
            <li>
              <a href="javascript:;" id="wechat">
                <s class="phone"></s>
                <span>手机访问</span>
                <img src="../imgs/index/header/icon_down.png" alt="" />
              </a>
            </li>
          </ul>
          <ul class="nav_right">
            <li><a>Hi,欢迎来到手机商城!</a></li>
            <li><a href="login.html">登录</a></li>
            <li><a href="register.html">注册</a></li>
            <li><a href="#">我的订单</a></li>
            <li><a href="#">账户中心</a></li>
            <li><a href="#">商户中心</a></li>
            <li><a href="#">帮助中心</a></li>
          </ul>
        </div>
      </div>
      <!-- 头部搜索 -->
      <div class="headerMiddle">
        <img src="../imgs/index/header/title.png" alt="" />
        <div class="myCart">
          <img src="../imgs/index/header/icon_cartOn.png" alt="" />
          <a href="cart.html">我的购物车</a>
          <img src="../imgs/index/header/bg_upArrow.png" alt="" />
        </div>
      </div>
      <div class="search">
        <input
          type="text"
          class="searchInput"
          placeholder="请输入要搜索的关键词"
        />
        <a href="">搜索</a>
      </div>
      <!-- 头部选项卡 -->
      <ul class="headerTab">
        <li><a href="./index.html" style="color: #c81623">首页</a></li>
        <li><a href="./list.html">全部商品</a></li>
        <li><a href="./list.html">华为</a></li>
        <li><a href="./list.html">荣耀</a></li>
        <li><a href="./list.html">苹果</a></li>
        <li><a href="./list.html">魅族</a></li>
        <li><a href="./list.html">三星</a></li>
        <li><a href="./list.html">OPPO</a></li>
        <li><a href="./list.html">VIVO</a></li>
        <li><a href="./list.html">小米</a></li>
      </ul>
    </div>

    <!-- 内容 -->
    <div class="cart-box">
      <!-- 进度条 -->
      <div class="cart-step">
        <div class="step-logo">
          <img src="../imgs/cart/icon_cart_80.png" alt="" />
          <span>购物车</span>
        </div>
        <div class="stepList">
          <div class="step active">
            <div class="step-number num-active">1</div>
            <div class="step-text">1.我的购物车</div>
          </div>
          <div class="step">
            <div class="step-number">2</div>
            <div class="step-text">2.填写核对订单信息</div>
          </div>
          <div class="step">
            <div class="step-number">3</div>
            <div class="step-text">3.选择支付方式</div>
          </div>
          <div class="step">
            <div class="step-number">4</div>
            <div class="step-text">4.订单支付</div>
          </div>
        </div>
      </div>

      <!-- 商品列表 -->
      <div class="proList">
        <div class="pro-header">
          <div class="pro-heade-left">
            <div>
              <input type="checkbox" checked />
              <span>全选</span>
            </div>
            <div>商品</div>
          </div>
          <div class="pro-heade-right">
            <div class="pro-price">单价</div>
            <div class="pro-count">数量</div>
            <div class="pro-total">小计</div>
            <div class="pro-handle">操作</div>
          </div>
        </div>
        <!-- 列表 -->
        <div class="pro-list">
          <div class="pro-list-left">
            <!-- 选择框 -->
            <input type="checkbox" checked />
            <!-- 图片及标题详情 -->
            <div class="pro-content">
              <img src="../imgs/detail/100/100_md1.jpg" alt="" />
              <div>
                <p>华为 HUAWEI P40 Pro 全网通5G手机 双卡双待</p>
                <p>颜色:零度白-内存RAM+ROM:8GB+128GB</p>
              </div>
            </div>
          </div>
          <div class="pro-list-right">
            <!-- 单价 -->
            <div class="list-price">
              ¥5988.00
              <p>热卖</p>
            </div>
            <!-- 数量 -->
            <div class="list-count">
              <button>-</button>
              <input type="text" value="1" />
              <button>+</button>
            </div>
            <!-- 小计 -->
            <div class="list-total">¥5988.00</div>
            <!-- 操作 -->
            <div class="list-handle">
              <a href="javascript:;">移入收藏</a>
              <a href="javascript:;">删除商品</a>
            </div>
          </div>
        </div>
      </div>

      <!-- 结算 -->
      <div class="account">
        <div class="acc-check">
          <input type="checkbox" checked />
          <a href="javascript:;">删除选中商品</a>
        </div>
        <div class="acc-total">
          <a href="javascript:;">继续购物</a>
          <div>
            <span>结算金额：</span>
            <span class="dark-text">(不含运费)</span>
            <span class="all-total">¥5988.00</span>
            <span class="dark-text">积分</span>
            <span class="all-total">0.00</span>
            <a href="javascript:;">结算</a>
          </div>
        </div>
      </div>
    </div>

    <!-- 推荐商品 -->
    <div class="recommend">
      <div>推荐商品</div>
    </div>

    <!-- 底部 -->
    <div class="footer">
      <ul>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">服务详情</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
      <p>Copyright © 2016 北京熠天海纳科技有限公司 京ICP备16043770号</p>
      <div class="authentication">
        <a href="#"><img src="../imgs/index/footer/bottom01.png" alt="" /></a>
        <a href="#"><img src="../imgs/index/footer/bottom02.png" alt="" /></a>
        <a href="#"><img src="../imgs/index/footer/bottom03.png" alt="" /></a>
      </div>
    </div>

    <script src="../js/base.js"></script>
    <script src="../js/cart.js"></script>
  </body>
</html>
